<template>
  <form-layout>
    <span slot="title">{{$t('starting.joinTeam')}}</span>
    <v-form v-model="valid" ref="idForm" lazy-validation>
      <v-text-field
        :label="$t('starting.teamCode')"
        v-model="idForm.team_code"
        :rules="[v => /^\d{5,9}$/.test(v) || '非法id']"
        :hint="$t('starting.helpContactAdmin')"
        @keyup.enter.native="handleNext"
        required
      ></v-text-field>
      <v-btn class="primary" @click.native="handleNext" :disabled="!valid">{{$t('starting.next')}}</v-btn>
    </v-form>
    <v-alert type="warning" v-model="noFindTeam" dismissible outline transition="scale-transition">
      {{$t('starting.ETeamNotExist')}}
    </v-alert>
  </form-layout>
</template>

<script>
  import FormLayout from '@/views/layout/FormLayout'
  import { searchTeam } from '@/api/team'

  export default {
    components: { FormLayout },
    data: () => ({
      valid: true,
      idForm: {
        team_code: ''
      },
      noFindTeam: false
    }),
    methods: {
      handleNext() {
        if (this.$refs.idForm.validate()) {
          searchTeam(this.idForm.team_code).then(res => {
            if (res.data._id) {
              this.$router.push({
                path: '/starting/student/second',
                query: {
                  teamId: res.data._id,
                  dormitories: res.data.dormitories,
                  classes: res.data.classes
                }
              })
            } else {
              this.noFindTeam = true
              setTimeout(() => (this.noFindTeam = false), 4000)
            }
          })
        }
      }
    }
  }
</script>

<style scoped>

</style>
